import React, { useState, useCallback, useMemo } from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'
import { Layout, Menu, Row, Col, Button } from 'antd';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
    HomeOutlined,
    SkinOutlined,
    PropertySafetyOutlined,
    PartitionOutlined,
    BarsOutlined,
    PlusOutlined,
} from '@ant-design/icons';

import Home from './manage/Home'
import Goods from './manage/Goods'
import GoodsList from './manage/goods/List'
import GoodsAdd from './manage/goods/Add'
import Category from './manage/Category'
import Order from './manage/Order'
import User from './manage/User'

import store from '@/store'

import { withUser,withStore,withLogin } from '@/utils/hoc'



const { Header, Sider, Content } = Layout;
const baseUrl = '/manage'

function Manage(props) {console.log('Manage.props',props)
    const [collapsed, setCollapsed] = useState(false);
    const menu = useMemo(() => {
        return [
            {
                key: '/home',
                icon: <HomeOutlined />,
                label: '首页',
            },
            {
                key: '/goods',
                icon: <SkinOutlined />,
                label: '商品管理',
                children: [
                    {
                        key: '/goods/list',
                        icon: <BarsOutlined />,
                        label: '商品列表',
                    },
                    {
                        key: '/goods/add',
                        icon: <PlusOutlined />,
                        label: '添加商品',
                    },
                ]
            },
            {
                key: '/category',
                icon: <PartitionOutlined />,
                label: '分类管理',
                children: [
                    {
                        key: '/list',
                        icon: <BarsOutlined />,
                        label: '分类列表',
                    },
                    {
                        key: '/add',
                        icon: <PlusOutlined />,
                        label: '添加分类',
                    },
                ]
            },
            {
                key: '/user',
                icon: <UserOutlined />,
                label: '用户管理',
                children: [
                    {
                        key: '/user/list',
                        icon: <BarsOutlined />,
                        label: '用户列表',
                    },
                    {
                        key: '/user/add',
                        icon: <PlusOutlined />,
                        label: '添加用户',
                    },
                ]
            },
            {
                key: '/order',
                icon: <PropertySafetyOutlined />,
                label: '订单管理',
                children: [
                    {
                        key: '/order/list',
                        icon: <BarsOutlined />,
                        label: '订单列表',
                    },
                ]
            },
        ]
    }, [])
    const navigate = useNavigate()
    const changeMenu = useCallback(({ item, key, keyPath, domEvent }) => {
        console.log('changeMenu', key, keyPath)
        // key: /list
        // keyPath: ['/list','/goods']
        // 目标path: /manage/goods/list

        // const path = baseUrl + keyPath.reverse().join('');console.log('path',path)
        const path = baseUrl + key;
        navigate(path)
    }, [])

    // const { userInfo } = store.getState()

    const logout = useCallback(function(){
        store.dispatch({type:'logout'})
        navigate('/login')
    },[])

    // 监听state修改
    // store.subscribe(()=>{
    //     //刷新组件
    // })
    return (
        <Layout className='manage'>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo">电商后台管理系统</div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultOpenKeys={['/goods']}
                    defaultSelectedKeys={['/home']}
                    items={menu}
                    onClick={changeMenu}
                />
                {/* <Menu>
                    {
                        menu.map(item=>(
                            item.children ? 
                            <Menu.SubMenu>
                                {
                                    item.children.map(item=>(
                                        <Menu.Item></Menu.Item>
                                    ))
                                }
                            </Menu.SubMenu>
                            :
                            <Menu.Item></Menu.Item>
                        ))
                    }
                </Menu> */}
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                    }}
                >
                    <Row gutter={16}>
                        <Col span={6}>
                            {
                                React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                    className: 'trigger',
                                    onClick: () => setCollapsed(!collapsed),
                                })
                            }

                            {/* {
                                collapsed ?
                                <MenuUnfoldOutlined className='trigger' onClick={() => setCollapsed(!collapsed)}/>
                                :
                                <MenuFoldOutlined className='trigger' onClick={() => setCollapsed(!collapsed)}/>
                            } */}
                        </Col>
                        <Col span={18} className='text-right'>
                            <span>{props.user?.username}</span> <Button type="link" onClick={logout}>退出</Button>
                        </Col>
                    </Row>

                </Header>
                <Content
                    className="content"
                >
                    <Routes>
                        <Route path='home' element={<Home />} />
                        <Route path='goods' element={<Goods />}>
                            <Route path='list' element={<GoodsList />} />
                            <Route path='add' element={<GoodsAdd />} />
                        </Route>
                        <Route path='category' element={<Category />} />
                        <Route path='user' element={<User />} />
                        <Route path='order' element={<Order />} />
                    </Routes>
                </Content>
            </Layout>
        </Layout>
    );
}

// Manage = withUser(Manage);
// console.log('Manage', Manage)

Manage = withStore(function(state){
    return {
        user:state.userInfo,
    }
})(Manage)

Manage = withLogin(Manage)

export default Manage;